<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>操作日志列表--layui后台管理模板 2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
</head>

<body class="childrenBody">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="dateRange" placeholder="选择时间范围">
            </div>

            <div class="layui-input-inline">
                <a class="layui-btn search_btn" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</a>
            </div>
        </form>
    </blockquote>

    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this"><i class="layui-icon">&#xe655;</i>登录日志</li>
            <li><i class="layui-icon">&#xe655;</i>操作日志</li>
            <li><i class="layui-icon">&#xe655;</i>系统日志</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table id="logLoginList" lay-filter="logLoginList"></table>
            </div>

            <div class="layui-tab-item">
                <table id="logOperateList" lay-filter="logOperateList"></table>
            </div>

            <div class="layui-tab-item">
                <table id="logSysList" lay-filter="logSysList"></table>
            </div>
        </div>
    </div>

    <!--操作-->
    <script type="text/html" id="logSysListBar">
		<a class="layui-btn layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe615;</i>查看</a>
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="download"><i class="layui-icon">&#xe601;</i>下载</a>
    </script>

    <script type="text/html" id="resultTpl">
        {{#  if(d.result == 'ok'){ }}
          <span style="color: #F581B1;">登陆成功</span>
        {{#  } else { }}
          {{ d.sex }}
        {{#  } }}
      </script>


    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../js/common.js"></script>
    <script>
        layui.use(['form', 'layer', 'laydate', 'element', 'table', 'laytpl'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                laytpl = layui.laytpl,
                element = layui.element,
                table = layui.table;

            //当前选中的tab下标
            var tabIndex = 0;

            //监听tab选项卡切换
            element.on('tab(docDemoTabBrief)', function (data) {

                var id = data.elem.context.attributes[0].nodeValue;
                layui.each($(".layui-nav-child"), function () {
                    $(this).find("dd").removeClass("layui-this");
                });
                $("#" + id).attr("class", "layui-this");

                //记录当前选中tab
                tabIndex = data.index;
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#dateRange' //指定元素
                , range: true
            });

            //登陆日志列表
            var tableIns = table.render({
                elem: '#logLoginList'
                , url: contextPath + '/sys/log/queryLogLoginList' //数据接口
                , id: 'logLoginTable'
                , page: true //开启分页
                , height: "full-170"
                , limit: 15
                , limits: [15]
                , even: true
                , method: 'POST'   //laui 修改请求方式  
                , cellMinWidth: 95
                , cols: [[ //表头                    
                    { field: 'id', title: 'ID', align: "center" } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'username', title: '登录账号', align: "center" }
                    , { field: 'ip', title: '登陆IP', width: 200, align: "center" }
                    , {
                        field: 'result', title: '登陆结果', align: "center", templet: function (d) {
                            if (d.result == "ok") {
                                return ' <span style="color: green;">登陆成功</span>'
                            } else {
                                return ' <span style="color: red;">登陆失败</span>'
                            }
                        }
                    }
                    , { field: 'message', title: '异常信息描述', align: "center" }
                    , { field: 'createTime', title: '登陆日期', width: 200, align: "center" }
                ]]
            });

            //操作日志列表
            var tableIns2 = table.render({
                elem: '#logOperateList'
                , url: contextPath + '/sys/log/queryLogOperateList' //数据接口
                , id: 'logOperateTable'
                , page: true //开启分页
                , height: "full-170"
                , limit: 15
                , limits: [15]
                , even: true
                , method: 'POST'   //laui 修改请求方式   
                , cellMinWidth: 95 //最小宽度            
                , cols: [[ //表头                    
                    { field: 'id', title: 'ID', align: "center" } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'username', title: '登录账号', align: "center" }
                    , { field: 'ip', title: '登陆IP', width: 150, align: "center" }
                    , { field: 'method', title: '操作', align: "center" }
                    , { field: 'caption', title: '描述', width: 300, align: "center" }
                    , { field: 'createTime', title: '登陆日期', width: 200, align: "center" }
                ]]
            });

            //系统日志列表
            var tableIns3 = table.render({
                elem: '#logSysList'
                , url: contextPath + '/sys/log/queryLogSysList' //数据接口
                , id: 'logSysTable'
                , page: true //开启分页
                , height: "full-170"
                , limit: 15
                , limits: [15]
                , even: true
                , method: 'POST'   //laui 修改请求方式  
                , cellMinWidth: 95 //最小宽度         
                , cols: [[ //表头                    
                    { field: 'id', title: 'ID', align: "center" } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , { field: 'fileName', title: '日志文件', width: 200, align: "center" }
                    , { field: 'fileSize', title: '文件大小', align: "center" }
                    , { title: '操作', templet: '#logSysListBar', width: 160, align: "center" }
                ]]
            });

            //搜索
            $(".search_btn").on("click", function () {

                if (tabIndex == 0) {
                    table.reload('logLoginTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            dateRange: $('#dateRange').val()
                        }
                    });
                } else if (tabIndex == 1) {
                    table.reload('logOperateTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            dateRange: $('#dateRange').val()
                        }
                    });
                } else if (tabIndex == 2) {
                    table.reload('logSysTable', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            dateRange: $('#dateRange').val()
                        }
                    });
                }

            });

            //监听工具条
            table.on('tool(stockList)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                switch (obj.event) {
                    case 'detail':
                        layer.msg('查询操作');
                        break;

                    case 'delete':
                        layer.msg('删除操作');
                        break;
                }
            });
        });

    </script>
</body>

</html>